<!-- 机械详情 -->
<template>
  <div class="MechanicsItemInfo">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="headerContainer">
      <div>当前位置：</div>
      <div>
      <el-breadcrumb separator="/" class="headerContainerName">
        <el-breadcrumb-item :to="{ path: '/homePc' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><router-link :to="{name:'Personal',query:{navBarIndex:'3'}}">维护机械</router-link></el-breadcrumb-item>
        <el-breadcrumb-item>{{machineList.type_name}}</el-breadcrumb-item>
        <el-breadcrumb-item class="colorStyle">{{machineList.machine_name}}</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
    </div>
    <div class="container">
      <div class="titleBox">
        <div class="leftImgBox">
          <swiper
            class="swiper gallery-top"
            :key="swiperOptionTopKey"
            :options="swiperOptionTop"
            ref="swiperOptionTop"
          >
            <swiper-slide
              v-for="(item, index) of machineList.jxzp_list"
              :key="index"
            >
              <div class="leftImgBoximgWidth">
                <vue-photo-zoom-pro
                  :url="item"
                  :scale="2.5"
                  :width="200"
                  class="leftImgBoximg"
                >
                </vue-photo-zoom-pro>
              </div>
            </swiper-slide>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div> -->
          </swiper>
          <swiper
            class="swiper gallery-thumbs"
            :key="swiperOptionThumbsKey"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              v-for="(items, index) of machineList.jxzp_list"
              :key="index"
            >
              <img :src="items" class="leftImgBoximgTwo" />
            </swiper-slide>
          </swiper>
        </div>
        <!-- 右侧内容 -->
        <div class="rightBox">
          <div class="rightBoxWarp">
            <div class="rightTitleName">{{ machineList.machine_name }}</div>
            <div
              class="shareIconBox"
              :data-clipboard-text="dataClipboardText"
              @click="onShare(dataClipboardText)"
            >
              <img
                src="./../../../../../public/img/eenginering/shareIcon.png"
                class="shareIcon"
              />
              <span class="shareIconName">分享</span>
            </div>
          </div>
          <div class="mechanicsListDataBox">
            <div
              class="mechanicsListDataMoney"
              v-show="
                machineList.machine_quotedPrice != undefined
                  ? machineList.machine_quotedPrice.length >= 1
                  : ''
              "
            >
              <div class="titlePrice">价格：</div>
              <div
                class="styleListBox"
                v-for="(item, index) of machineList.machine_quotedPrice"
                :key="index"
              >
                <div class="styleBg">¥{{ item.price }}</div>
                <div class="styleBg1">{{ item.unit }}</div>
              </div>
            </div>
            <div
              class="mechanicsListDataMoney"
              v-if="
                machineList.machine_quotedPrice != undefined
                  ? machineList.machine_quotedPrice.length <= 0
                  : ''
              "
            >
              <div class="titlePrice">价格：</div>
              <div class="discussion">面议</div>
            </div>
            <div class="mechanicsListDataMoney1">
              <div class="titlePrice">设备品牌：</div>
              <div class="titlePrice1">
                {{ machineList.machine_brand ? machineList.machine_brand : "未知" }}
              </div>
            </div>
            <div class="mechanicsListDataMoney2">
              <div class="titlePrice">设备型号：</div>
              <div class="titlePrice1">
                {{ machineList.machine_model ? machineList.machine_model : "未知" }}
              </div>
            </div>
          </div>
          <div class="addressBox" v-if="machineList.machine_address">
            <img
              src="./../../../../../public/img/mechanics/addressIconInfo.png"
              class="addressIconInfo"
            />
            <div class="titlePrice2">{{ machineList.machine_address }}</div>
          </div>
        </div>
      </div>
      <!-- 机械详情 -->
      <div class="titleInfoName">
        <div class="InfoName">机械详情</div>
      </div>
      <div class="mechanicsInfo">
        <div class="listBoxWarp">
          <div class="warpBox">
            <div class="columnBox">
              <div class="columnTitleName">排放标准</div>
              <div class="columnTitleName">机械类型</div>
              <div class="columnTitleName">其他</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_standard
                    ? machineList.machine_standard
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.type_size_name ? machineList.type_size_name : "未知" }}
              </div>
              <div class="columnTitleInfo">
                {{
                  machineList.other_support
                    ? machineList.other_support
                    : "未知"
                }}
              </div>
            </div>
          </div>
          <div class="warpBox">
            <div class="columnBox">
              <div class="columnTitleName">表显小时数</div>
              <div class="columnTitleName">品牌及型号</div>
              <div class="columnTitleName">影响报价因素</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_power ? machineList.machine_power : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.brand_model ? machineList.brand_model : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{
                  machineList.affect_quotation
                    ? machineList.affect_quotation
                    : "未知"
                }}
              </div>
            </div>
          </div>
          <div class="warpBox1">
            <div class="columnBox">
              <div class="columnTitleName">车辆出厂日期</div>
              <div class="columnTitleName">机械位置</div>
              <div class="columnTitleName">设备ID</div>
            </div>
            <div class="columnBox1">
              <div class="columnTitleInfo">
                {{
                  machineList.machine_production_date
                    ? machineList.machine_production_date
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{
                  machineList.machine_address
                    ? machineList.machine_address
                    : "未知"
                }}
              </div>
              <div class="columnTitleInfo">
                {{ machineList.machine_num ? machineList.machine_num : "未知" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="imagesBox">
        <div v-if="machineList.jxzj">
          <div class="imagesTitleName">设备整机照片</div>
          <img :src="machineList.jxzj" class="jxzjImg" />
        </div>
        <div
          v-if="
            machineList.jxjblist != undefined
              ? machineList.jxjblist.length >= 1
              : ''
          "
        >
          <div class="imagesTitleName1">设备局部照片</div>
          <div v-for="(image, images) of machineList.jxjblist" :key="images">
            <img :src="image" class="jxzjImg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import {editInfoData} from '../../../../apis/api.js'
import { Message } from "element-ui";
import Clipboard from "clipboard"; //一键复制
export default {
components: {
  NavBarHeader,
  Swiper,
  SwiperSlide,
},
  data() {
 // 这里存放数据
    return {
      dataClipboardText: window.location.href,
      swiperOptionTop: {
        centeredSlides: true,
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        loop: false,
        slidesPerView: 1,
        autoplay: false,
      },
      swiperOptionTopKey: Math.random().toString(36).substr(2),
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 5,
        touchRatio: 0.2,
        slideToClickedSlide: true,
      },
      swiperOptionThumbsKey: Math.random().toString(36).substr(2),
      machineList:{},
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {
   
},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
    onShare() {
      var clipboard = new Clipboard(".shareIconBox");
      clipboard.on("success", (e) => {
        setTimeout(() => {
          Message.success("已复制当前网址");
        }, 500);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Message.error("浏览器不支持复制");
        // 释放内存
        clipboard.destroy();
      });
    },
  // 详情数据
  async editInfoData(){
      let data = {
      machine_id:this.$route.query.machineId
    }
    try{
    let res = await editInfoData(data)
      if(res.data.result == '1'){
      this.machineList = res.data.body
      }
    } catch(e){}
  },
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.editInfoData()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
      this.$nextTick(() => {
      this.swiperOptionTop.thumbs = {
        swiper: this.$refs.swiperThumbs.$swiper,
        slideThumbActiveClass: "slide-thumb-active",
      };
      this.swiperOptionTopKey = Math.random().toString(36).substr(2); //重新初始化top-swiper
    });
},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.headerContainer{
  margin: 0 auto;
  width: 1180px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.container {
  padding-bottom: 20px;
  padding-top: 20px;
  margin: 0 auto;
  width: 1180px;
  // height: 100vh;
  padding-bottom: 50px;
}
.titleBox {
  display: flex;
}
.leftImgBox {
  position: relative;
  width: 450px;
  height: 389px;
}
.leftImgBoximgWidth {
  width: 450px;
  height: 389px;
  object-fit: cover;
  position: relative;
}
.leftImgBoximg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leftImgBoximgTwo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rightBox {
  width: 709px;
  margin-left: 20px;
}
.rightTitleName {
  font-size: 22px;
  color: #333;
}
.mechanicsListDataBox {
  margin-top: 14px;
  border-top: 1px solid #ff855b;
  background: #fff8f5;
  height: 194px;
}
.mechanicsListDataMoney {
  display: flex;
  padding-top: 20px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListDataMoney1 {
  display: flex;
  align-items: center;
  padding-top: 16px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListDataMoney2 {
  display: flex;
  align-items: center;
  padding-top: 14px;
  margin-left: 20px;
  box-sizing: border-box;
}
.mechanicsListData {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.mechanicsType {
  font-size: 14px;
  color: #999;
}
.mechanicsBrand {
  font-size: 14px;
  color: #999;
}
.heightStyle {
  width: 1px;
  height: 10px;
  background-color: #999;
  margin: 0 20px;
}
.shareIconBox {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.shareIcon {
  width: 15px;
  height: 15px;
}
.shareIconName {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
.search {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.countData {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}
.offerBox {
  width: 709px;
  background-color: #f5f7fa;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
.itemstyleListBox {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.styleBg {
  padding: 0 10px;
  color: #ff7d59;
  font-size: 26px;
  text-align: center;
}
.discussion {
  color: #ff7d59;
  font-size: 24px;
}
.styleBg1 {
  font-size: 12px;
  color: #999;
}
.styleBg2 {
  padding: 0 10px;
  border: 1px solid #ff7d59;
  border-left: none;
  height: 24px;
  line-height: 24px;
  color: #333;
  font-size: 12px;
  text-align: center;
  background: #fff;
}
.styleBg3 {
  padding: 0 10px;
  border: 1px solid #ff7d59;
  border-left: none;
  height: 24px;
  line-height: 24px;
  color: #333;
  font-size: 12px;
  text-align: center;
  background: #fff;
}
.styleListBox {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.offerInfoBox {
  margin-left: 20px;
  margin-top: 18px;
}
.cardDate {
  font-size: 14px;
  color: #999;
  span {
    font-size: 14px;
    color: #333;
  }
}
.influence {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.other {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.otherInfo {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  span {
    font-size: 14px;
    color: #333;
  }
}
.goConsulting {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
  position: relative;
  cursor: pointer;
}
.goConsultingName {
  font-size: 16px;
  color: #fff;
}
.isPhone {
  width: 300px;
  height: 60px;
  line-height: 60px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.5;
  position: absolute;
  left: 0;
  bottom: -80px;
  text-align: center;
  color: #fff;
  font-size: 24px;
}
.otherRightIcon {
  width: 27px;
  height: 11px;
  margin-left: 10px;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.4);
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 28px;
}
.mechanicsListBox {
  margin: 50px auto 0 auto;
  width: 1180px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}
.mechanicsItem {
  width: 275px;
  height: 370px;
  margin-bottom: 30px;
  margin-right: 15px;
  cursor: pointer;
}
.itemImg {
  width: 275px;
  height: 242px;
  overflow: hidden;
  position: relative;
}
.mechanicsImg:hover {
  width: 275px;
  height: 243px;
  transform: scale(1.1, 1.1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsImg {
  width: 275px;
  height: 243px;
  object-fit: cover;
  transform: scale(1, 1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsItemInfo {
  width: 273px;
  height: 129px;
  border: 1px solid #ebeef5;
}
.itemStyleBgMoney {
  font-size: 16px;
  color: #ff855b;
}
.itemStyleBgOne {
  color: #ff7d59;
  font-size: 16px;
}
.styleBgOne {
  padding: 0 30px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  height: 26px;
  line-height: 26px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
.itemTitleName {
  font-size: 14px;
  height: 40px;
  color: #333;
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
  box-sizing: border-box;
}
.itemTitleInfo {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}
.itemAddress {
  font-size: 12px;
  color: #999;
}
.titleIconNameBox {
  margin-top: 64px;
  margin-bottom: 50px;
}
.titleIconName {
  width: 167px;
  height: 68px;
}
.rightBoxWarp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.titlePrice {
  font-size: 14px;
  color: #999;
  margin-top: 6px;
}
.titlePrice1 {
  font-size: 14px;
  color: #333;
  margin-top: 6px;
}
.titlePrice2 {
  font-size: 14px;
  color: #999;
}
.addressBox {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.addressIconInfo {
  width: 18px;
  height: 21px;
  margin-right: 6px;
}
.mechanicsInfo {
  height: 194px;
  border: 1px solid #dcdfe6;
  border-top: none;
  box-sizing: border-box;
}
.titleInfoName {
  height: 34px;
  line-height: 34px;
  background: #fff8f5;
  margin-top: 50px;
  border-bottom: 1px solid #ff855b;
}
.InfoName {
  margin-left: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.warpBox {
  display: flex;
  align-items: center;
}
.warpBox1 {
  display: flex;
  align-items: center;
  margin-right: 100px;
}
.listBoxWarp {
  width: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.columnBox {
  display: flex;
  flex-direction: column;
}
.columnBox1 {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
}
.columnTitleName {
  font-size: 14px;
  color: #999;
  margin-top: 29px;
}
.columnTitleInfo {
  font-size: 14px;
  color: #333;
  margin-top: 29px;
}
.enterpriseTitle {
  font-size: 14px;
  color: #333;
  margin-top: 20px;
}
.imagesBox {
  margin-top: 30px;
}
.imagesTitleName {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.imagesTitleName1 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 24px;
}
.jxzjImg {
  display: block;
  margin: 24px auto 0 auto;
  width: 838px;
  height: 602px;
  // object-fit:cover;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  margin-top: 20px;
}
.gallery-thumbs .swiper-slide {
  height: 60px;
  width: 25%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide.slide-thumb-active {
  opacity: 1;
}
.titleMoneyWarp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 10px 0 10px;
}
.styleBorder {
  display: flex;
  align-items: center;
  // padding-top: 12px;
  padding-left: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
.styleTitle {
  display: flex;
  align-items: center;
}
.styleBottom {
  display: flex;
  align-items: center;
  margin-left: 23px;
}
.styleTitleName {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}
.styleImg {
  width: 15px;
  height: 15px;
}

</style>
